import { observable, action, runInAction } from 'mobx';
import { fetchCheckList } from '../api/index';
import { ICostBillClassifyDTOList } from '../interface/ICheckList';
import { ISearchOptions } from '../interface/ISearchOptions';
import { IPageOptions } from '../interface/IPageOptions';
import { IOption } from '@casstime/bricks/dist/src/components/select/DropdownList';
import { Moment } from 'moment';
import { Toast } from '@casstime/bricks';

const billTypeList = [
  '开思券账单',
  '融资手续费账单',
  '技术服务费账单',
  '平台使用费账单',
  '全部账单'
];

class ExamplePageStore {
  /** 列表数据 */
  @observable checkList: ICostBillClassifyDTOList[] = [];

  /** 一共有几条数据 */
  @observable totalNumber: number = 0;

  /** 分页组件参数 */
  @observable pageOptions: IPageOptions = {
    /** 当前页码 */
    current: 1,
    /** 每页几条数据 */
    size: 10
  };

  /** 账单类型 */
  @observable billTypeName: IOption = {};

  /** 账单类型数组 */
  @observable billTypeNameArray: IOption[] = billTypeList.map(
    (item: string) => ({
      label: item,
      value: item
    })
  );

  /** 开始时间 */
  @observable billCycleStart: string | null | Moment = null;

  /** 结束时间 */
  @observable billCycleEnd: string | null | Moment = null;

  /** 搜索框状态 */
  @observable searchOptions: ISearchOptions = {
    /** 账单编号 */
    costBillId: '',
    /** 账单类型 */
    billTypeName: '',
    /** 制单时间 */
    billCycleStart: '',
    /** 截止日期 */
    billCycleEnd: ''
  };

  /** 分页组件传参 */
  @action
  updatePageOptions(options: IPageOptions) {
    runInAction(() => {
      this.pageOptions = {
        ...this.pageOptions,
        ...options
      };
    });
  }

  /**
   *  账单编号输入框
   * @param e
   */
  @action
  changeCostBillId(e: React.ChangeEvent<HTMLInputElement>) {
    runInAction(() => {
      this.searchOptions.costBillId = e.target.value;
    });
  }

  /**
   *  账单类型选择框
   * @param option
   */
  @action
  changeBillTypeName(option: IOption) {
    this.searchOptions.billTypeName = option.label;
    this.billTypeName = option;
  }

  /**
   * 修改时间
   * @param value
   * @param field
   */
  @action
  changeDate(value: Moment, field: 'billCycleStart' | 'billCycleEnd') {
    this[field] = value.format('YYYY-MM-DD');
    this.searchOptions[field] = value.format('YYYY-MM-DD');
  }

  /** 点击查询事件 */
  @action
  onSearch() {
    try {
      this.updatePageOptions({ current: 1 });
      this.fetchCheckList();
      Toast.success('查询成功', 2000);
    } catch {
      Toast.error('查询失败', 2000);
    }
  }

  /** 获取查询结果 */
  @action
  async fetchCheckList() {
    try {
      const data = {
        ...this.pageOptions,
        ...this.searchOptions
      };
      const List = await fetchCheckList(data);
      runInAction(() => {
        this.checkList = List.costBillClassifyDTOList;
        this.totalNumber = List.totalNumber;
        // console.log('查询结果', data);
      });
    } catch (error) {
      // console.log('查询失败');
      return false;
    }
  }
}

export default ExamplePageStore;
